<template>
  <div class="classCard">
    <div>
      <el-image
        style="width: 150px;height: 200px"
        :src="classInfo['cover_image_url']"
        fit="fill"
      />
    </div>
    <div id="cardDes">
      <h4>{{ classInfo['category_name'] }}</h4>
      <el-divider />
      <div style="text-align: center">{{ classInfo['category_des'] }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ClassCard',
  props: {
    classInfo: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {

    }
  }
}
</script>

<style scoped>

.classCard {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 5px;
  width: 320px;
  height: 208px;
  display: flex;
}

.classCard:hover {
  box-shadow: 0 0 1rem #8c8c8c;
}

#cardDes {
  width: 150px;
  display: flex;
  justify-content: start;
  flex-direction: column;
  align-items: center;
  word-wrap: anywhere;
}
</style>
